<template>
    <div  class="el-menu-vertical">
        <el-menu :default-active="defaultActive"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
            <template v-for="(item,index) in menuList">
                <el-submenu v-if="item.children && item.children.length>0" :index="item.menuId+''">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span>{{item.name}}</span>
                    </template>
                     <el-menu-item :index="citem.menuId"
                                   v-for="(citem,cindex) in item.children" @click.native="goPage(citem)">
                         <i :class="item.icon"></i>
                         <span slot="title">{{citem.name}}</span>
                     </el-menu-item>
                </el-submenu>
                <el-menu-item  :index="item.menuId" v-else @click.native="goPage(item)" >
                    <i :class="item.icon"></i>
                    <span slot="title">{{item.name}}</span>
                </el-menu-item>
            </template>
        </el-menu>
    </div>
</template>

<script>
    import {QUERY_DASH_BORARD_TREE } from '@api/url'
    import ajax from '@/api/ajax'
    import {Minix} from './menuMinin'
    export default {
        name:'slideMenu',
        mixins:[Minix],
        data () {
            return{
                menuList:[],
                defaultActive:'',
            }
        },
        mounted(){
            let query = this.$route.query;
            this.defaultActive=query.id||'1792588879916818433';//设置一个默认选中
            this.queryMenu().then(()=>{
                this.goPage(this.menuList[0]);
            });
        },
        methods: {
            queryMenu(){
                let param={
                    parentId: '0',
                }
                return ajax.post(QUERY_DASH_BORARD_TREE, param).then(res => {
                    const treeSort = (arr = []) => {
                        const sort = []

                        arr.forEach(item => {
                            if(item.attr === '1'){
                                sort.unshift({...item,children:treeSort(item.children||[])})
                            }else{
                                sort.push(item)
                            }
                        })
                        return sort;
                    }
                    let data= treeSort(res.data)
                    data.unshift({name:'业务大屏',menuId: '111',path:'/useHome/bigScreen'})
                    this.menuList=data;
                })
            },
            goPage(item){
                this.defaultActive=item.menuId;
                if(item.path){
                    this.$router.push(`${item.path}?id=${item.menuId}`)
                }else{
                    this.$router.push(`/useHome/index?id=${item.menuId}`)
                }
            }
        }
    }
</script>
<style scoped lang="stylus">
    .el-menu-vertical{
        width 240px;
        background-color #545c64
        height calc(100vh - 60px)
        overflow-y: auto
    }
</style>
